import React, { memo } from 'react';
import { Button, Space, Table, Tag, Popconfirm } from 'antd';
import { statusFilter } from '../config/dict';

const { Column } = Table;

interface IInitalData {
  loading: boolean;
  data: any;
  total: number;
  editItem: any;
  onPage: any;
}

interface DataType {
  id: React.Key;
  name: string;
  age: number;
  address: string;
}

const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name
  })
};

const TableList: React.FC<IInitalData> = memo((props) => {
  const { loading, data, total, editItem, onPage } = props;
  const pageChange = (page: number) => {
    onPage(page);
  };
  console.log('table表格：', data);
  return (
    <Table
      rowKey="id"
      rowSelection={{ type: 'checkbox', ...rowSelection }}
      loading={loading}
      dataSource={data}
      bordered
      pagination={{
        position: ['bottomLeft'],
        defaultPageSize: 5,
        total,
        onChange: pageChange
      }}
    >
      <Column title="序号" dataIndex="id" key="id" align="center" width={70} />
      <Column title="名称" dataIndex="name" key="name" />
      <Column
        title="接受方式"
        dataIndex="receiveMode"
        key="receiveMode"
        align="center"
        render={(tag: string) => {
          return <Tag color="blue">{tag ? '在线接受' : '离线接受'}</Tag>;
        }}
      />
      <Column title="创建时间" dataIndex="createTime" key="createTime" align="center" />
      <Column
        title="状态"
        dataIndex="status"
        key="status"
        align="center"
        render={(status: number) => {
          return <Tag color="blue">{statusFilter(status)}</Tag>;
        }}
      />
      {/* onClick={() => showFormModal(true, record)} */}
      <Column
        title="操作"
        key="action"
        align="center"
        render={(_, record: any) => {
          return (
            <Space>
              <Button type="link" size="small" onClick={() => editItem(record)}>
                编辑
              </Button>
              <Popconfirm
                title="确定删除此数据吗？"
                okText="确定"
                cancelText="取消"
                // onConfirm={() => delTableItemFn(record.id)}
              >
                <Button type="link" size="small">
                  删除
                </Button>
              </Popconfirm>
            </Space>
          );
        }}
      />
    </Table>
  );
});

export default TableList;
